<template>
  <view class="content">
    <text class="title">文件上传下载示例</text>
    
    <!-- 上传文件 -->
    <view class="section">
      <text class="section-title">文件上传</text>
      <view class="upload-area" @click="chooseImage">
        <view v-if="!imagePath" class="upload-placeholder">
          <text class="upload-icon">+</text>
          <text class="upload-text">选择图片上传</text>
        </view>
        <image v-else :src="imagePath" mode="aspectFill" class="preview-image" />
      </view>
      <button 
        v-if="imagePath" 
        @click="uploadImage" 
        class="btn"
        :disabled="uploading"
      >
        {{ uploading ? '上传中...' : '上传图片' }}
      </button>
      <view v-if="uploadResult" class="result-info">
        <text>上传结果: {{ uploadResult }}</text>
      </view>
    </view>
    
    <!-- 下载文件 -->
    <view class="section">
      <text class="section-title">文件下载</text>
      <input 
        v-model="downloadUrl" 
        placeholder="请输入下载链接" 
        class="input" 
      />
      <button 
        @click="downloadFile" 
        class="btn"
        :disabled="downloading"
      >
        {{ downloading ? '下载中...' : '下载文件' }}
      </button>
      <view v-if="downloadResult" class="result-info">
        <text>下载结果: {{ downloadResult }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { fileApi } from '../../api/file.js'

// 响应式数据
const imagePath = ref('')
const uploading = ref(false)
const uploadingResult = ref('')
const downloadUrl = ref('https://picsum.photos/200/300')
const downloading = ref(false)
const downloadResult = ref('')

// 选择图片
const chooseImage = async () => {
  if (uploading.value) return
  
  try {
    const res = await new Promise((resolve, reject) => {
      uni.chooseImage({
        count: 1,
        success: resolve,
        fail: reject
      })
    })
    
    imagePath.value = res.tempFilePaths[0]
  } catch (error) {
    uni.showToast({
      title: '选择图片失败',
      icon: 'none'
    })
  }
}

// 上传图片
const uploadImage = async () => {
  if (!imagePath.value) {
    uni.showToast({
      title: '请先选择图片',
      icon: 'none'
    })
    return
  }
  
  uploading.value = true
  uploadingResult.value = ''
  
  try {
    // 注意：这里使用的是测试API，实际项目中需要替换为真实的上传接口
    const res = await fileApi.uploadFile(imagePath.value, 'file', {
      userId: '123',
      description: '测试上传'
    })
    
    uploadingResult.value = '上传成功'
    console.log('上传结果:', res)
  } catch (error) {
    uploadingResult.value = '上传失败: ' + (error.message || error.errMsg || '未知错误')
    console.error('上传失败:', error)
  } finally {
    uploading.value = false
  }
}

// 下载文件
const downloadFile = async () => {
  if (!downloadUrl.value) {
    uni.showToast({
      title: '请输入下载链接',
      icon: 'none'
    })
    return
  }
  
  downloading.value = true
  downloadResult.value = ''
  
  try {
    // 注意：这里使用的是示例链接，实际项目中需要替换为真实的下载接口
    const res = await fileApi.downloadFile(downloadUrl.value)
    downloadResult.value = '下载成功，文件路径: ' + res.tempFilePath
    console.log('下载结果:', res)
  } catch (error) {
    downloadResult.value = '下载失败: ' + (error.message || error.errMsg || '未知错误')
    console.error('下载失败:', error)
  } finally {
    downloading.value = false
  }
}
</script>

<style>
.content {
  padding: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  display: block;
}

.section {
  margin-bottom: 60rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
  color: #333;
}

.upload-area {
  width: 100%;
  height: 300rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  background-color: #f9f9f9;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 80rpx;
  color: #ccc;
  line-height: 1;
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #999;
}

.preview-image {
  width: 100%;
  height: 100%;
}

.input {
  border: 1rpx solid #ccc;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.btn {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 20rpx;
  margin: 20rpx 0;
  border-radius: 10rpx;
  width: 100%;
  font-size: 28rpx;
}

.btn:disabled {
  background-color: #ccc;
}

.result-info {
  padding: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.result-info text {
  font-size: 24rpx;
  color: #666;
  word-wrap: break-word;
}
</style>